import React, { useEffect, useState,useReducer } from "react";
import { Link,useNavigate } from "react-router-dom";
import { Form, Col, Input, Row, Button, Table,Select,Space,Pagination } from "antd";
import { LeftOutlined,AlignLeftOutlined} from "@ant-design/icons";

const { Option } = Select;

const getFields = () => {
    return (
      <React.Fragment>
        <Col span={24}>
          <div   className="headAddShop">
            <Row>
            <Col span={8}>
              <LeftOutlined  style={{fontSize:30,paddingLeft:10,paddingTop:10,paddingBottom:10 }}/>
              </Col>
              <Col span={8} style={{paddingLeft:100,paddingTop:10,paddingBottom:10}}>
                <span style={{center:30,fontSize:20}}>菜品管理</span>
              </Col>

              <Col span={8} style={{paddingTop:10,paddingBottom:10,paddingRight:10,paddingLeft:160}}>
                <Button style={{background:'#FFC300'}}>
                  <Link to="/poi-manage/addCui">
                  创建新菜品
                  </Link>
                  </Button>
                <AlignLeftOutlined/>
              </Col>
            </Row>
           

            
          </div>
        </Col>


        <Col span={8} style={{marginTop:30}}>
         
            <Row className="divfix">
            <Col  className="leftCommDiv" span={14} >
            状态
            </Col>

            <Col span={10}>
            <Form.Item name="enabled"  style={{height:8}}>
            <Select>
              <Option value="">所有</Option>
              <Option value="true">已上架</Option>
              <Option value="false">以下架</Option>
            </Select>
          </Form.Item>

            </Col>
      
            </Row>
         
        </Col>

        <Col span={10}  style={{marginTop:30}}>
        
          <Row className="divfix" >
          <Col  span={10}  className="leftCommDiv">
          菜品单价
            </Col>

            <Col span={14}>
         
            <Input.Group compact>
      <Form.Item name="from">
      <Input style={{ width: 100, textAlign: 'center' }} placeholder="0.99" />
      </Form.Item>
     
      <Input
        className="site-input-split"
        style={{
          width: 30,
          borderLeft: 0,
          borderRight: 0,
          pointerEvents: 'none',
          background:'white',
        }}
        placeholder="~"
        disabled
      />
      <Form.Item name="to">
      <Input
        className="site-input-right"
        style={{
          width: 100,
          textAlign: 'center',
          borderLeft:0,
          
        }}
        placeholder="999.99"
      />

      </Form.Item>
     
    </Input.Group>

   
            </Col>
          </Row>
        </Col>
        <Col span={6}  style={{marginTop:30}}>
        
            

            <Row className="divfix">
          <Col  span={14} className="leftCommDiv">
            计量单位
            </Col>

            <Col span={10}>
            <Form.Item name={"unitOfMeasure"} style={{height:8}} 
              rules={[{max:5,message:"长度过大"}]}
            >
              <Input  />
            </Form.Item>
            </Col>
          </Row>
       
        </Col>

        <Col  span={4}  className="leftCommDiv" style={{marginLeft:30}}>
             菜品名称
            </Col>
            <Col span={8} style={{marginLeft:-20}}>
              <Form.Item name="name"
               rules={[{max:10,message:"长度过大"}]}
              >
              <Input/>
              </Form.Item>
           
              </Col>
      </React.Fragment>
    );
  };
  export default getFields;